import React, { Component } from 'react'
import styles from './Home.module.scss'
import Header from './../components/Home/Header'
import FocusNew from './../components/Home/FocusNew'
import ThinkTank from './../components/Home/ThinkTank'
import Special from './../components/Home/Special'
import TableOfContents from './../components/Home/TableOfContents'
import Links from './../components/Home/Links'
import homeBg from './../images/bg1.png'
import api from './../serve/api'

import { RouteWithSubRoutes } from '../router'

export default class Home extends Component {

  constructor(props) {
    super(props)
    this.state = {
      page: {
        page: 1,
        pageSize: 10
      },
      advice: [],
      course: [],
      files: [],
    }
  }


  componentDidMount() {
    this.getAdvice()
    this.getCourse()
    this.getFiles()

  }

  async getAdvice() {
    const data = await api.listAdviceApi({ ...this.state.page })
    if (data && data.code === '000000') {
      this.setState({
        advice: data.result
      })
    }
  }

  async getCourse() {
    const data = await api.listCourseApi({ ...this.state.page })
    if (data && data.code === '000000') {
      this.setState({
        course: data.result
      })
    }
  }

  async getFiles() {
    const data = await api.listFileApi({ ...this.state.page })
    if (data && data.code === '000000') {
      this.setState({
        files: data.result
      })
    }
  }

  render() {
    const { routes, location } = this.props
    const { advice, course, files } = this.state
    const headerProps = {
      advice,
      course,
      files
    }
    return (
      <div className={styles.home_container}>
        {location.pathname === '/mainPage/main' &&
        <div>
          {/* <img className={styles.home_bg_img} src={homeBg} alt=""/> */}
          <Header data={{...headerProps}} />
          <FocusNew />
          <ThinkTank />
          <Special />
          <TableOfContents />
          <Links />
        </div>}
        {location.pathname  !== '/mainPage/main' && routes.map((route, i) => (
          <RouteWithSubRoutes key={i} {...route} />
        ))}
      </div>
    )
  }
}
